<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-blue-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-profile.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">合同管理</h1>
                <button onclick="createContract()" class="text-white hover:opacity-80">
                    <i class="fas fa-plus text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Contract Status Card -->
        <div class="px-4 py-3 bg-gradient-to-r from-blue-600 to-indigo-600">
            <div class="bg-white/10 backdrop-blur-sm rounded-xl p-4">
                <div class="text-white">
                    <p class="text-sm opacity-80 mb-1">合同概览</p>
                    <p class="text-2xl font-bold mb-3">8份</p>
                    <div class="grid grid-cols-3 gap-4">
                        <div class="text-center">
                            <p class="text-xs opacity-80">生效中</p>
                            <p class="text-lg font-semibold">6</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">待签署</p>
                            <p class="text-lg font-semibold">1</p>
                        </div>
                        <div class="text-center">
                            <p class="text-xs opacity-80">即将到期</p>
                            <p class="text-lg font-semibold">1</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Scrollable Content -->
        <div class="h-[calc(852px-220px)] overflow-y-auto pb-20">
            <!-- Active Contracts -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center justify-between">
                    <span class="flex items-center">
                        <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                        生效合同
                    </span>
                    <span onclick="viewAllContracts()" class="text-blue-600 text-xs cursor-pointer hover:text-blue-700">
                        查看全部 <i class="fas fa-chevron-right text-xs"></i>
                    </span>
                </h3>
                <div class="space-y-3">
                    <!-- Platform Agreement -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <p class="text-sm font-medium">平台入驻合同</p>
                                    <p class="text-xs text-gray-500 mt-1">合同编号: CONTRACT-2024-001</p>
                                </div>
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">生效中</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">签署日期</p>
                                    <p class="font-medium">2024-03-15</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">到期日期</p>
                                    <p class="font-medium text-green-600">2026-03-14</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">合同期限</p>
                                    <p class="font-medium">2年</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">续约状态</p>
                                    <p class="font-medium text-blue-600">自动续约</p>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewContract('CONTRACT-2024-001')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看合同
                                </button>
                                <button onclick="downloadContract('CONTRACT-2024-001')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    下载
                                </button>
                                <button onclick="renewContract('CONTRACT-2024-001')" class="bg-green-50 text-green-600 text-xs px-3 py-2 rounded-lg hover:bg-green-100 transition-colors">
                                    续约
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Service Agreement -->
                    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
                        <div class="p-3">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <p class="text-sm font-medium">增值服务协议</p>
                                    <p class="text-xs text-gray-500 mt-1">合同编号: CONTRACT-2024-015</p>
                                </div>
                                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full">生效中</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">签署日期</p>
                                    <p class="font-medium">2024-10-20</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">到期日期</p>
                                    <p class="font-medium text-green-600">2025-10-19</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">服务类型</p>
                                    <p class="font-medium">营销推广</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">费用</p>
                                    <p class="font-medium text-red-600">¥50,000/年</p>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="viewContract('CONTRACT-2024-015')" class="flex-1 bg-blue-50 text-blue-600 text-xs py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    查看合同
                                </button>
                                <button onclick="downloadContract('CONTRACT-2024-015')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    下载
                                </button>
                                <button onclick="terminateContract('CONTRACT-2024-015')" class="bg-red-50 text-red-600 text-xs px-3 py-2 rounded-lg hover:bg-red-100 transition-colors">
                                    解约
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pending Contracts -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    待处理合同
                </h3>
                <div class="space-y-3">
                    <!-- Pending Contract -->
                    <div class="bg-yellow-50 rounded-xl border border-yellow-200 overflow-hidden">
                        <div class="p-3">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <p class="text-sm font-medium">品牌授权协议</p>
                                    <p class="text-xs text-gray-500 mt-1">合同编号: DRAFT-2025-003</p>
                                </div>
                                <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded-full">待签署</span>
                            </div>
                            <div class="grid grid-cols-2 gap-3 text-xs mb-3">
                                <div>
                                    <p class="text-gray-500">创建日期</p>
                                    <p class="font-medium">2025-01-05</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">预计签署</p>
                                    <p class="font-medium text-orange-600">2025-01-15</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">品牌方</p>
                                    <p class="font-medium">知名品牌商</p>
                                </div>
                                <div>
                                    <p class="text-gray-500">授权费</p>
                                    <p class="font-medium text-red-600">¥80,000/年</p>
                                </div>
                            </div>
                            <div class="flex space-x-2">
                                <button onclick="signContract('DRAFT-2025-003')" class="flex-1 bg-yellow-500 text-white text-xs py-2 rounded-lg hover:bg-yellow-600 transition-colors">
                                    立即签署
                                </button>
                                <button onclick="reviewContract('DRAFT-2025-003')" class="bg-blue-50 text-blue-600 text-xs px-3 py-2 rounded-lg hover:bg-blue-100 transition-colors">
                                    审阅
                                </button>
                                <button onclick="rejectContract('DRAFT-2025-003')" class="bg-gray-50 text-gray-600 text-xs px-3 py-2 rounded-lg hover:bg-gray-100 transition-colors">
                                    拒绝
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contract Templates -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    合同模板
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button onclick="downloadTemplate('platform')" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-file-contract text-2xl text-blue-600 mb-2"></i>
                        <p class="text-sm font-medium">平台入驻</p>
                        <p class="text-xs text-gray-500 mt-1">标准模板</p>
                    </button>
                    <button onclick="downloadTemplate('service')" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-handshake text-2xl text-green-600 mb-2"></i>
                        <p class="text-sm font-medium">服务协议</p>
                        <p class="text-xs text-gray-500 mt-1">增值服务</p>
                    </button>
                    <button onclick="downloadTemplate('supply')" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-truck text-2xl text-purple-600 mb-2"></i>
                        <p class="text-sm font-medium">供应商</p>
                        <p class="text-xs text-gray-500 mt-1">采购协议</p>
                    </button>
                    <button onclick="downloadTemplate('brand')" class="bg-white rounded-xl border border-gray-200 p-4 text-center hover:bg-gray-50 transition-colors">
                        <i class="fas fa-award text-2xl text-orange-600 mb-2"></i>
                        <p class="text-sm font-medium">品牌授权</p>
                        <p class="text-xs text-gray-500 mt-1">授权协议</p>
                    </button>
                </div>
            </div>

            <!-- Renewal Reminders -->
            <div class="p-4 pb-8">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-blue-600 mr-2 rounded-full"></span>
                    续约提醒
                </h3>
                <div class="bg-orange-50 rounded-xl border border-orange-200 p-4">
                    <div class="flex items-center mb-3">
                        <i class="fas fa-bell text-orange-600 text-xl mr-3"></i>
                        <div>
                            <p class="font-semibold text-orange-800">即将到期合同</p>
                            <p class="text-xs text-orange-700 mt-1">1份合同将在30天内到期</p>
                        </div>
                    </div>
                    <div class="bg-white rounded-lg p-3 mb-3">
                        <div class="flex justify-between items-center">
                            <div>
                                <p class="text-sm font-medium">增值服务协议</p>
                                <p class="text-xs text-gray-500">将于2025-10-19到期</p>
                            </div>
                            <span class="text-xs text-orange-600 font-medium">283天后</span>
                        </div>
                    </div>
                    <div class="flex space-x-2">
                        <button onclick="renewContract('CONTRACT-2024-015')" class="flex-1 bg-orange-600 text-white text-sm py-2 rounded-lg hover:bg-orange-700 transition-colors">
                            立即续约
                        </button>
                        <button onclick="setRenewalReminder()" class="bg-white text-orange-600 text-sm px-4 py-2 rounded-lg border border-orange-300 hover:bg-orange-50 transition-colors">
                            设置提醒
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Action Bar -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex space-x-3">
                <button onclick="createContract()" class="flex-1 bg-blue-600 text-white font-medium py-2.5 rounded-lg hover:bg-blue-700 transition-colors">
                    <i class="fas fa-plus mr-2"></i>新建合同
                </button>
                <button onclick="scanContract()" class="bg-gray-100 text-gray-700 font-medium px-4 py-2.5 rounded-lg hover:bg-gray-200 transition-colors">
                    <i class="fas fa-qrcode"></i>
                </button>
            </div>
        </div>
    </div>

    <script>
        // Create contract
        function createContract() {
            window.location.href = 'b2b-create-contract.html';
        }

        // View all contracts
        function viewAllContracts() {
            window.location.href = 'b2b-all-contracts.html';
        }

        // Contract actions
        function viewContract(contractId) {
            window.location.href = `b2b-contract-detail.html?id=${contractId}`;
        }

        function downloadContract(contractId) {
            showToast('正在下载合同...');
            setTimeout(() => {
                showToast('合同下载完成');
            }, 1500);
        }

        function renewContract(contractId) {
            if (confirm('确定要续约此合同吗？\n\n续约后将按照当前条款延长合同期限。')) {
                showToast('续约申请已提交');
                setTimeout(() => {
                    showToast('续约处理中，请等待平台确认');
                }, 1000);
            }
        }

        function terminateContract(contractId) {
            if (confirm('确定要申请解约吗？\n\n解约申请提交后将进入审核流程，可能产生违约费用。')) {
                const reason = prompt('请输入解约原因（必填）:');
                if (reason && reason.trim()) {
                    showToast('解约申请已提交');
                }
            }
        }

        function signContract(contractId) {
            if (confirm('确定要签署此合同吗？\n\n签署后合同立即生效，请仔细阅读合同条款。')) {
                showToast('正在准备电子签署...');
                setTimeout(() => {
                    showToast('请完成电子签名验证');
                }, 2000);
            }
        }

        function reviewContract(contractId) {
            window.location.href = `b2b-review-contract.html?id=${contractId}`;
        }

        function rejectContract(contractId) {
            const reason = prompt('请输入拒绝原因（必填）:');
            if (reason && reason.trim()) {
                showToast('已拒绝合同，拒绝原因已记录');
            }
        }

        // Download template
        function downloadTemplate(templateType) {
            const templateNames = {
                'platform': '平台入驻协议模板',
                'service': '增值服务协议模板',
                'supply': '供应商协议模板',
                'brand': '品牌授权协议模板'
            };

            showToast(`正在下载${templateNames[templateType]}...`);
            setTimeout(() => {
                showToast(`${templateNames[templateType]}下载完成`);
            }, 1500);
        }

        // Set renewal reminder
        function setRenewalReminder() {
            const days = prompt('请输入提前提醒天数（默认30天）:', '30');
            if (days && !isNaN(days)) {
                showToast(`续约提醒已设置为提前${days}天`);
            }
        }

        // Scan contract
        function scanContract() {
            alert('合同扫描\n\n使用摄像头扫描纸质合同\n自动识别合同信息并录入系统');
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('合同管理中心已加载');
        });
    </script>
</body>
</html>